<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>扫描</title>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        html,
        body {
            height: 100%;
            background-color: rgba(0,0,0,0);
        }

        .header {
            position: relative;
            background-color: #4F77AA;
            color: #fff;
            width: 100%;
            height: 44px;
            font-size: 16px;
            line-height: 44px;
            text-align: center;
        }

        .header-item-left {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 44px;
            height: 44px;
            background: url(../img/back.png) no-repeat center center;
            background-size: 22px 22px;
        }
        .qrcode-box {
            width: 250px;
            height: 250px;
            position: absolute;
            /*left: 50%;
            margin-left: -125px;*/
            top: 100px;
        }

        .qrcode-box:after {
            -webkit-animation: rotateAnim linear 3.68s infinite;
            animation: rotateAnim linear 3.68s infinite;
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 2px;
            background-color: #d8be26;
        }
        /*二维码上下移动的扫描横线*/

        @keyframes rotateAnim {
            from {
                top: 0;
            }
            to {
                top: 100%;
            }
        }

        @-webkit-keyframes rotateAnim {
            from {
                top: 0;
            }
            to {
                top: 100%;
            }
        }
        /*二维码扫描框的四角*/

        .qrcode-box span {
            width: 14px;
            height: 14px;
            position: absolute;
            border: 2px solid #1fa2ff;
        }

        .qrcode-box span:nth-child( 1) {
            left: 0;
            top: 0;
            border-width: 2px 0 0 2px;
        }

        .qrcode-box span:nth-child( 2) {
            right: 0;
            top: 0;
            border-width: 2px 2px 0 0;
        }

        .qrcode-box span:nth-child( 3) {
            right: 0;
            bottom: 0;
            border-width: 0 2px 2px 0;
        }

        .qrcode-box span:nth-child( 4) {
            left: 0;
            bottom: 0;
            border-width: 0 0 2px 2px;
        }

        #flashlight{
            width: 100%;
            text-align: center;
            height: 60px;
            position: absolute;
            bottom: 60px;
        }
        #flashlight span{
            display: inline-block;
            color: #ffffff;
            font-size: 36px;
            width: 40px;
            height: 40px;
        }

        #footer{
            position: absolute;
            bottom: 5px;
            width: 100%;
            height: 40px;
        }
        #footer button.mui-btn{
            height:100%;
            width: 50%;
            padding: 6px 15px;
            margin-top: 6px;
            background: #4F77AA;
            color: #ffffff;
        }
        #footer button#equipment{
            float: left;
            border-right:1px solid #ffffff;
            box-sizing:border-box;

        }
        #footer button#repair{
            float: left;

        }
        #footer button.active{
            background: #0377a8;
        }
        /*iframe#mainFrame{
            width: 100%;
            height: calc(100% - 110px);

        }*/
    </style>
</head>

<body>
<!-- 头部导航条 -->
<div id="header" class="header">
    <div class="header-item-left" tapmode="" onclick="goBack();"></div>
    自定义样式 二维码扫描页面
    <div class="header-item-right" onclick="decodeImg();"   style="position: absolute;bottom:0;right:15px;">相册</div>
</div>
<!-- 二维码扫描框 -->
<div id="qrcode-box" class="qrcode-box">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div id="flashlight">
    <span onclick="flashLight()" class="iconfont icon-zhaomingshoudiantong"></span>
</div>
<!--<iframe id="mainFrame" frameborder="0" scrolling="no" allow="geolocation; microphone; camera" src="qrcode_content.html"></iframe>-->
<!-- <div id="flashlight">
     <span onclick="flashLight()" class="iconfont icon-zhaomingshoudiantong"></span>
 </div>-->
<div id="footer" class="footer">
    <button id="equipment" class="mui-btn mui-btn-block active">设备</button>
    <button id="repair" class="mui-btn mui-btn-block">报修</button>
</div>

</body>
<script src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../js/mui.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">

    apiready = function() {

        $api.setStorage('codeUrl',"html/public/saoyisao.html");//页面加载时先置于设备

        var eHeader = $api.byId('header');
        $api.fixStatusBar(eHeader); // 顶部header的沉浸式修复
        fnShowQRScannerBox();
    }

    function fnShowQRScannerBox() { // 根据屏幕实际宽度修正二维码扫描框的位置并加载显示
        var eQRCodeBox = $api.byId('qrcode-box');
        var top = (api.winHeight - 250)/2;
        var left = (api.winWidth - 250)/2;
        $api.css(eQRCodeBox, 'top: '+top+'px;left:'+left+'px;display:block;');
    }

    function goBack() {
        api.execScript({
            name: 'root',
            script: 'fnCloseCustomQRCode();'
        });

    }

    $("button").click(function (id) {
        //获取被点击按钮的id
        var obj = window.event ? event.srcElement : evt.target;
        var btnId=date = obj.id;
        if('equipment' == btnId){
            // alert("equipment")
            $api.setStorage('codeUrl',"html/public/saoyisao.html");
            $("button#equipment").addClass("active");
            $("button#repair").removeClass("active");
        }else if('repair' == btnId){
            // alert('repair')
            $api.setStorage('codeUrl',"html/public/saoyisao1.html");
            $("button#equipment").removeClass("active");
            $("button#repair").addClass("active");
        }

    })
    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../index.html";
    })

</script>

</html>
